<template>
    <div class="sysadmin-info">
        <h4>个人信息</h4>
        <div class="info-row">
            <label for="identity" class="info-label">身份:</label>
            <input type="text" id="identity" class="info-input" v-model="identity" disabled/>
        </div>
        <h4 style="margin-top: 20px;">管理用户</h4>
        <div class="info-row">
            <button type="button" class="btn btn-outline-primary btn-lg" @click="clearMessage"
                data-bs-toggle="modal" data-bs-target="#addStudent"
            >添加学生</button>
            <div class="modal fade" id="addStudent" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="addStudentLabel">添加学生</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="info-row" style="margin-bottom: 10px;">
                                <label for="studentId" class="info-label">学号:</label>
                                <input type="text" id="studentId" class="info-input" v-model="studentId"/>
                            </div>
                            <div class="info-row" style="margin-bottom: 10px;">
                                <label for="password" class="info-label">密码:</label>
                                <input type="password" id="password" class="info-input" v-model="password"/>
                            </div>
                            <div class="info-row" style="margin-bottom: 10px;">
                                <label for="name" class="info-label">姓名:</label>
                                <input type="text" id="name" class="info-input" v-model="name"/>
                            </div>
                            <div class="info-row" style="margin-bottom: 10px;">
                                <label for="gender" class="info-label">性别:</label>
                                <div class="info-option">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender1" id="gender1" value="男" v-model="gender">
                                        <label class="form-check-label info-option-select" for="gender1">男</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender2" id="gender2" value="女" v-model="gender">
                                        <label class="form-check-label info-option-select" for="gender2">女</label>
                                    </div>
                                </div>
                            </div>
                            <div class="info-row" style="margin-bottom: 20px;">
                                <label for="grade" class="info-label">班级:</label>
                                <input type="text" id="grade" class="info-input" v-model="grade" />
                            </div>
                            <div class="select-area">
                                <div class="select-area-item">
                                    <div style="min-width: 55px; font-weight: bold;">楼栋：</div>
                                    <select class="form-select" aria-label="Default select example" v-model="building">
                                        <option selected>请选择楼栋</option>
                                        <option :value="item.name" v-for="item in buildings" :key="item.id">{{ item.name }}</option>
                                    </select>
                                </div>
                                <div class="select-area-item" v-if="building != '请选择楼栋'">
                                    <div style="min-width: 55px; font-weight: bold;">楼层：</div>
                                    <select class="form-select" aria-label="Default select example" v-model="floor">
                                        <option selected>请选择楼层</option>
                                        <option :value="num" v-for="num in getArray(floor_num)" :key="num">{{ num }}</option>
                                    </select>
                                </div>
                                <div class="select-area-item" v-if="floor != '请选择楼层'">
                                    <div style="min-width: 55px; font-weight: bold;">寝室号：</div>
                                    <select class="form-select" aria-label="Default select example" v-model="dormId">
                                        <option selected>请选择寝室号</option>
                                        <option :value="dorm.dormId" v-for="dorm in dorms" :key="dorm.dormId">{{ dorm.dormId }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div style="color: red; margin-right: 20px;" >{{ error_message }}</div>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">关闭</button>
                            <button type="button" class="btn btn-primary" @click="clickAddStudent">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-outline-danger btn-lg" @click="clickUpload">删除学生</button>
        </div>

        <div class="info-row">
            <button type="button" class="btn btn-outline-primary btn-lg" @click="clearMessage"
                data-bs-toggle="modal" data-bs-target="#addAdmin"
            >添加宿管</button>
            <div class="modal fade" id="addAdmin" tabindex="-1">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h1 class="modal-title fs-5" id="addAdminLabel">添加宿管</h1>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="info-row" style="margin-bottom: 10px;">
                                <label for="workId" class="info-label">工号:</label>
                                <input type="text" id="workId" class="info-input" v-model="workId"/>
                            </div>
                            <div class="info-row" style="margin-bottom: 10px;">
                                <label for="password" class="info-label">密码:</label>
                                <input type="password" id="password" class="info-input" v-model="password"/>
                            </div>
                            <div class="info-row" style="margin-bottom: 10px;">
                                <label for="name" class="info-label">姓名:</label>
                                <input type="text" id="name" class="info-input" v-model="name"/>
                            </div>
                            <div class="info-row" style="margin-bottom: 10px;">
                                <label for="gender" class="info-label">性别:</label>
                                <div class="info-option">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender3" id="gender3" value="男" v-model="gender">
                                        <label class="form-check-label info-option-select" for="gender3">男</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="gender4" id="gender4" value="女" v-model="gender">
                                        <label class="form-check-label info-option-select" for="gender4">女</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div style="color: red; margin-right: 20px;" >{{ error_message }}</div>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">关闭</button>
                            <button type="button" class="btn btn-primary" @click="clickAddAdmin">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-outline-danger btn-lg" @click="clickUpload">删除宿管</button>
        </div>

        <!-- Success Modal -->
        <div class="modal" id="successModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content" style="border-radius: 8px; text-align: center;">
                <!-- 提示信息 -->
                <div class="modal-body" style="font-size: 18px; font-weight: bold; color: #555; margin: 20px 0;">
                    添加成功
                </div>
                    <!-- 确认按钮 -->
                    <div class="modal-footer" style="border-top: none; justify-content: center; padding-bottom: 20px;">
                        <button type="button" class="btn btn-success" data-bs-dismiss="modal" style="background-color: #28a745; border: none; padding: 10px 20px;">
                        OK
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import $ from 'jquery';
import { Modal } from 'bootstrap/dist/js/bootstrap';    // 引入Modal的API
import { useStore } from 'vuex';

const store = useStore();
const identity = ref("系统管理员");
const studentId = ref('');
const workId = ref('');
const password = ref('123');
const name = ref("");
const gender = ref("");                             
const grade = ref("");
const building = ref("请选择楼栋");
const floor = ref("请选择楼层");
const dormId = ref("请选择寝室号");
const error_message = ref('');
const buildings = ref([]);
const dorms = ref([]);

const getBuildingList = () => {
    $.ajax({
        url: "http://localhost:3000/api/sysadmin/get-buildinglist",
        type: "GET",
        headers: {
            'Authorization': "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message === "success") {
                buildings.value = resp.buildings;
            }
        },
        error(resp) {
            console.log(resp);
        }
    });
}
getBuildingList();

const floor_num = computed(() => {
    if (building.value !== "请选择楼栋") {
        const buildingData = buildings.value.find(item => item.name === building.value);
        return buildingData ? Number(buildingData.height) : 1; // 确保返回有效数字
    }
    return 1;
})

watch(building, () => {
    floor.value = '请选择楼层';
    dormId.value = '请选择寝室号';
    $.ajax({
        url: "http://localhost:3000/api/sysadmin/get-dormlist",
        type: "GET",
        data: {
            building: building.value,
            floor: floor.value,
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == "success") {
                dorms.value = resp.dorms;
            } else {
                dorms.value = [];
            }
        },
        error(resp) {
            console.log(resp);
        }
    })
});
watch(floor, () => {
    dormId.value = '请选择寝室号';
    $.ajax({
        url: "http://localhost:3000/api/sysadmin/get-dormlist",
        type: "GET",
        data: {
            building: building.value,
            floor: floor.value,
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == "success") {
                dorms.value = resp.dorms;
            } else {
                dorms.value = [];
            }
        },
        error(resp) {
            console.log(resp);
        }
    })
})

const getArray = (n) => {
    return Array(Number(n)).fill(0).map((_, index) => index + 1);  // 返回从 1 到 n 的数组
}

const clearMessage = () => {
    studentId.value = '';
    workId.value = '';
    password.value = '123';
    name.value = '';
    gender.value = '';
    grade.value = '';
    building.value = "请选择楼栋";
    floor.value = "请选择楼层";
    dormId.value = "请选择寝室号";
}

const delay = () => {
    setTimeout(() => {
        const modalElement = document.getElementById('successModal');
        const modal = new Modal(modalElement);
        modal.show();
    }, 500)
}

const clickAddStudent = () => {
    error_message.value = '';
    $.ajax({
        url: "http://localhost:3000/api/sysadmin/add-student",
        type: "POST",
        data: {
            studentId: studentId.value,
            password: password.value,
            name: name.value,
            gender: gender.value,
            grade: grade.value,
            building: building.value,
            floor: floor.value,
            dormId: dormId.value
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == "success") {
                Modal.getInstance("#addStudent").hide();  // 关闭Modal框
                delay();
            } else {
                error_message.value = resp.error_message;
            }
        },
        error(resp) {
            console.log(resp);
        }
    })
}

const clickAddAdmin = () => {
    error_message.value = '';
    $.ajax({
        url: "http://localhost:3000/api/sysadmin/add-dormadmin",
        type: "POST",
        data: {
            workId: workId.value,
            password: password.value,
            name: name.value,
            gender: gender.value
        },
        headers: {
            Authorization: "Bearer " + store.state.user.token,
        },
        success(resp) {
            if (resp.error_message == "success") {
                Modal.getInstance("#addAdmin").hide();  // 关闭Modal框
                delay();
            } else {
                error_message.value = resp.error_message;
            }
        },
        error(resp) {
            console.log(resp);
        }
    })
}

</script>

<style scoped>
.sysadmin-info {
    display: flex; 
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    width: 100%;
    min-height: 50vh;
}

.info-row {
    display: flex;
    align-items: center; /* 确保 label 和 input 垂直居中 */
    justify-content: center;
    gap: 15px;
}

.info-label {
    font-weight: bold;
    width: 80px;
    text-align: right;
}

.info-input {
    flex: 1;
    max-width: 250px; /* 限制输入框最大宽度 */
    padding: 10px; /* 增加内边距使其更美观 */
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* 确保 padding 不影响总宽度 */
}

.info-option {
    flex: 1;
    max-width: 250px; /* 限制输入框最大宽度 */
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.info-option-select {
    user-select: none;
}

.select-area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}
.select-area-item {
    display: flex;
    align-items: center;
    width: 260px;
}
</style>
